<template>
  <van-nav-bar class="Header" title="荣誉墙" color="#{{this.}}{{this.}}BFFF" />
  <div class="body">
    <p>今日奖励</p>
    <div class="today_award"></div>
    <p>每周奖励</p>
    <div class="week_award">
      <div class="cup" align="center">
        <img src="../image/cup.png" />
        <p>每周之星</p>
        <p>{{ this.weelstat }}</p>
      </div>

      <div class="cup" align="center">
        <img src="../image/cup.png" />
        <p>超越之星</p>
        <p>{{ this.grewstat }}</p>
      </div>
      <div class="cup" align="center">
        <img src="../image/cup.png" />
        <p>全勤宝宝</p>
        <p>{{ this.fullattendance }}</p>
      </div>
      <div class="cup" align="center">
        <img src="../image/cup.png" />
        <p>全面发展好宝宝</p>
        <p>{{ this.fulldevelopment }}</p>
      </div>
    </div>

    <p style="margin-top: 30px">本学期小小奖励</p>
    <div class="term_award">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="健康" name="1" value="2">
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>生活习惯</p>
            <p>{{ this.livehabit }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>身心状态</p>
            <p>{{ this.physicalhealth }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>运动能力</p>
            <p>{{ this.athleticability }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>动作发展</p>
            <p>{{ this.actiondevelopment }}</p>
          </div>
        </van-collapse-item>
        <van-collapse-item title="语言" name="2" value="1">
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>书写</p>
            <p>{{ this.writing }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>倾听理解</p>
            <p>{{ this.listen }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>语言</p>
            <p>{{ this.language }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>阅读</p>
            <p>{{ this.reading }}</p>
          </div>
        </van-collapse-item>
        <van-collapse-item title="社会" name="3" value="6">
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>历史</p>
            <p>{{ this.history }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>解决冲突</p>
            <p>{{ this.solveproblem }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>情感</p>
            <p>{{ this.emotion }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>地理</p>
            <p>{{ this.geography }}</p>
          </div>
        </van-collapse-item>
        <van-collapse-item title="科学" name="4" value="6">
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>反思</p>
            <p>{{ this.rethink }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>几何</p>
            <p>{{ this.geometry }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>模式</p>
            <p>{{ this.mode }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>数学</p>
            <p>{{ this.mathematics }}</p>
          </div>
        </van-collapse-item>
        <van-collapse-item title="艺术" name="5" value="5">
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>美术</p>
            <p>{{ this.finearts }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>音乐</p>
            <p>{{ this.music }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>律动</p>
            <p>{{ this.Rhythm }}</p>
          </div>
          <div class="medal" align="center">
            <img src="../image/medal.png" />
            <p>感受与欣赏</p>
            <p>{{ this.feeling }}</p>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
  
  <script lang="ts">
import { defineComponent } from "vue";
import { NavBar } from "vant";
import { Collapse, CollapseItem } from "vant";
import { ref } from "vue";
import axios from "axios";
export default defineComponent({
  watch: {
    $route() {
      window.location.reload();
    },
  },
  data() {
    return {
      weelstat: "",
      grewstat: "",
      fullattendance: "",
      fulldevelopment: "",
      livehabit: "",
      physicalhealth: "",
      athleticability: "",
      actiondevelopment: "",
      writing: "",
      listen: "",
      language: "",
      reading: "",
      history: "",
      solveproblem: "",
      emotion: "",
      geography: "",
      rethink: "",
      geometry: "",
      mode: "",
      mathematics: "",
      finearts: "",
      music: "",
      Rhythm: "",
      feeling: "",
    };
  },
  created() {
    this.gethonorWalldata();
  },
  methods: {
    gethonorWalldata() {
      axios
        .get("/access")
        .then((res) => {
          console.log(res);
          console.log(res.data.result.data);
          const data = res.data.result.data;
          this.weelstat = data.weelstat;
          this.grewstat = data.grewstat;
          (this.fullattendance = data.fullattendance),
            (this.fulldevelopment = data.fulldevelopment),
            (this.livehabit = data.livehabit),
            (this.physicalhealth = data.physicalhealth),
            (this.athleticability = data.athleticability),
            (this.actiondevelopment = data.actiondevelopment),
            (this.writing = data.writing),
            (this.listen = data.listen),
            (this.language = data.language),
            (this.reading = data.reading),
            (this.history = data.history),
            (this.solveproblem = data.solveproblem),
            (this.emotion = data.emotion),
            (this.geography = data.geography),
            (this.rethink = data.rethink),
            (this.geometry = data.geometry),
            (this.mode = data.mode),
            (this.mathematics = data.mathematics),
            (this.finearts = data.finearts),
            (this.music = data.music),
            (this.Rhythm = data.Rhythm),
            (this.feeling = data.feeling);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [NavBar.name]: NavBar,
  },
  setup() {
    const activeNames = ref(["1"]);
    return { activeNames };
  },
});
</script>
  <style  scoped>
.Header {
  width: 100%;
  height: 50px;
  background-color: #00bfff;
}
.body > p {
  font-size: 15px;
  font-weight: bold;
  padding: 5px;
}
img {
  height: 50px;
  width: 50px;
  margin: auto;
}
.body,
.today_award,
.week_award,
.term_award {
  border: 1px solid rgb(250, 228, 228);
  padding: 10px;
  /* margin: 20px auto; */
  border-radius: 5%;
}
.today_award,
.week_award,
.term_award {
  box-shadow: 0px 0px 10px 2px rgb(248, 233, 233);
}
.today_award {
  background-image: url(../image/bg.png);
  background-size: auto 300px;
  background-repeat: no-repeat;
  height: 300px;
}
.week_award {
  height: 100px;
}
.week_award > div {
  display: inline-block;
  width: 20%;
  /* float: left; */
  margin-left: 10px;
  /* border: 1px solid black; */
}
.cup > p {
  font-weight: 100px;
  text-align: center;
}
.medal {
  float: left;
  height: 100%;
  width: 70px;
}
.medal > p {
  font-size: 15px;
}
:root {
  --van-nav-bar-title-text-color: white;
}
</style>